<template>
	<view class="observe-cell">
		<view class="left-content" style="">
			<!-- 观察多人 -->
			<view class="avatarMul" v-if="item.isMultiple === 1" @click="openShowAll(item.list)">
				<image class="avatarImg" :src="val.headSculpture" mode="aspectFill" v-for="(val, index) in item.list"
					:key="index" />
			</view>
			<!-- 观察单人 -->
			<view class="avatar inline" v-else>
				<image class="img" :src="item.list[0].headSculpture" mode="aspectFill"
					@click="onClickKidInfo(item.list[0])" v-if="item.list[0].headSculpture" />
				<image class="img icon-default-avatar" mode="aspectFill" @click="onClickKidInfo(item.list[0])" v-else />
			</view>
		</view>
		<view class="right-content" style="margin: 0 20rpx; width: 100%;">
			<view class="listTop" style="">
				<view class="" style="display: flex;justify-content: center;">
					<span class="name f32 bold">{{ item.name==null?"无名":item.name }}</span>
					<span class="all" v-if="item.isMultiple === 1" @click="openShowAll(item.list)">全部</span>
				</view>
				<view class="listRight">

					<button class="share" plain open-type="share" @click="onShareClick(item)">
						<view class="icon-share" style="width: 30rpx; height: 30rpx; margin-right: 10rpx;"></view>
						分享
					</button>
				</view>
			</view>
			<view class="content f28">
				<!-- 观察文字 -->
				<view>{{ item.content }}</view>
				<!-- 观察图片或者视频 -->
				<view class="image" v-if="item.imagesList.length <= 1">
					<view v-for="(imgs,imgIdx) in item.imagesList">
						<video v-if="isVideoUrl(imgs.url)" :src="imgs.url"></video>
						<image v-else :src="imgs.url" mode="aspectFill" :key="imgIdx"
							@click="lookImg([item.imagesList,imgIdx])" />
					</view>
				</view>
				<view class="image" v-else>
					<uni-grid :column="3" :showBorder="false">
						<uni-grid-item v-for="(ele, row) in item.imagesList">
							<view class="" style="padding: 2px;;height: 100%;width: 100%;">
								<image style="width: 100%; height: 100%;" mode="aspectFill" :src="ele.url"
									@click="lookImg([item.imagesList, row])">
								</image>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
			<view style="margin: 10rpx 0rpx;">
				<span class="f24 time">{{ item.createTime }}</span>
				<span class="delete" @click="handleDelete(item.id, idx)">
					<image class="icon-delete"></image>
				</span>
				<span class="edit" @click="handleEditObserve(item)">
					<image class="icon-edit"></image>
				</span>
			</view>

			<view class="analyze">
				<u-collapse ref="collapseView" :border="false" @close="handleAnalyzeClose(idx)"
					@open="handleAnalyzeOpen(idx)">
					<u-collapse-item ref="collapseItem" class="f28" title="观察分析" :name="idx" :value="'超小助正在分析中'"
						v-if="item.status==2">
					</u-collapse-item>
					<u-collapse-item ref="collapseItem" class="f28" title="观察分析" :name="idx" :line="5"
						:value="item.expanded?'收起':'展开'" v-else>
						<view v-if="!item.aiAnalysis">
							<view>
								<text class="u-collapse-content text inline f28">
									还未进行分析…
								</text>
							</view>
						</view>
						<view v-else>
							<view style="display: flex;">
								<span class="order inline"></span>
								<text class="u-collapse-content text inline f28"
									:class="{showAllIN:item.expanded, hidetext:!item.expanded}">

									{{ item.aiAnalysis }}
								</text>
							</view>
						</view>

					</u-collapse-item>
				</u-collapse>
				<image class="analyze-icon icon-star" />
				<image class="analyze-title-bottom icon-star-line" />
			</view>
			<view class="item-content" v-if="item.fileUrl">
				<image class="icon-word" style="width: 30rpx; height: 30rpx; margin-right: 10rpx;"
					@click="copyBtn(item)">
				</image>
				<view class="left-content">观察记录文件:</view>
				<view class="right-content" @click="copyBtn(item)">
					<view class="text">{{item.fileUrl}}</view>
					<image class="icon-copy icon">
					</image>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		name: "rf-observeCell",
		props: {
			data: {
				required: true,
			},
			imageUrl: {
				type: String,
				required: false,
				default: ""
			},
			name: {
				type: String,
				required: false,
				default: ""
			},
			remark: {
				type: String,
				required: false,
				default: ""
			},
			confirmText: {
				type: String,
				required: false,
				default: "确定"
			}
		},
		data() {
			return {
				item: this.data,


				observe: "", // 分享传参
			};
		},
		watch: {

			data(newVal, oldVal) {
				console.log("--------------------------------------------------");
				this.item = newVal;
			},
			// deep: true // 如果需要深度监听对象或数组类型的props，请设置deep为true
		},
		/**
		 * 用户点击右上角分享
		 */
		// onShareAppMessage: function(res) {
		// 	console.log(res);
		// 	console.log("用户点击右上角分享: " + JSON.stringify(res));
		// 	if (res.from === 'button') {
		// 		return {
		// 			title: this.observe.name + "小朋友的观察",
		// 			desc: this.observe.content,
		// 			path: "/pages-sub/share/share?observeid=" + this.observe.id,
		// 			imageUrl: this.observe.imagesList[0].url, //数据返回的图片数据
		// 			success: function(res) {
		// 				// 转发成功
		// 				console.log(res)
		// 			},
		// 			fail: function(res) {
		// 				// 转发失败
		// 				console.log(res)
		// 			}
		// 		}
		// 	} else { //用户点击右上角3个点分享（小程序端）
		// 		var shareId = this.userInfo.id;
		// 		return {
		// 			title: "邀请好友，获VIP特权",
		// 			path: '/pages/home/home?shareId=' + shareId,
		// 			imageUrl: "https://superta.noboyun.com/static/share/default.png", //数据返回的图片数据
		// 			success: function(res) {
		// 				// 转发成功
		// 				console.log(res)
		// 			},
		// 			fail: function(res) {
		// 				// 转发失败
		// 				console.log(res)
		// 			}
		// 		}
		// 		// return {
		// 		// 	title: '观察',
		// 		// 	path: "/pages-sub/share/share",
		// 		// 	// imageUrl: this.observe.imagesList[0], //数据返回的图片数据
		// 		// 	success: function(res) {
		// 		// 		// 转发成功
		// 		// 		console.log(res)
		// 		// 	},
		// 		// 	fail: function(res) {
		// 		// 		// 转发失败
		// 		// 		console.log(res)
		// 		// 	}
		// 		// }
		// 	}
		// },
		methods: {
			// 分享
			onShareClick(item) {
				this.$parent.share(item);
			},

			// 判断地址是否为视频地址
			isVideoUrl(url) {
				// 视频常见后缀名列表
				const videoExtensions = ['mp4', 'flv', 'avi', 'wmv', 'mov', 'mkv', 'rm', 'rmvb'];

				// 获取url的最后一部分（通常为文件名+后缀）
				const fileName = url.split('/').pop();

				// 分离出文件后缀名
				const fileExtension = fileName.split('.').pop().toLowerCase();

				// 判断后缀名是否在视频格式列表中
				return videoExtensions.includes(fileExtension);
			},
			// 预览图片
			lookImg: function(val) {
				const urls = val[0].map(item => {
					return item.url
				})
				const current = val[1]
				console.log(urls);
				console.log(current);

				uni.previewImage({
					urls,
					current
				})
			},
			copyBtn(item) {
				let _that = this;
				wx.setClipboardData({
					//复制文本
					data: item.fileUrl,
					success: function(res) {
						wx.showToast({
							title: '复制成功',
							icon: 'none',
							mask: 'true' //是否设置点击蒙版，防止点击穿透
						});
					}
				});
			},

			// 观察分析关闭事件
			handleAnalyzeClose(index) {
				console.log("----------------------");
				console.log(this.item);
				console.log(this.data);
				let _that = this

				clearTimeout(this.timer)
				this.timer = null
				this.timer = setTimeout(() => {
					_that.item.expanded = false;
					_that.$forceUpdate();
				}, 300);
			},
			// 观赏分析展开事件
			handleAnalyzeOpen(index) {
				this.item.expanded = true;
				this.$forceUpdate();
			},
			openShowAll() {
				this.$emit("showAll", this.item.list)
			},
			handleDelete(id, idx) {
				this.$emit("del", id, idx)
			},
			handleEditObserve() {
				this.$emit("edit", this.item)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.observe-cell {
		display: flex;
		padding: 10rpx;

		.avatar {}

		.analyze {
			position: relative;
			background-color: #FAF9E5;

			.u-collapse {
				background-color: #FAF9E5;
				border-radius: 8rpx;
			}

			// 标题head
			.u-cell__body {
				height: 80rpx;
				padding: 20rpx !important;
			}

			.u-cell__title-text {
				font-size: 28rpx !important;
				color: #3A3D4B !important;
				font-weight: 600;
				padding-left: 42rpx;
				line-height: 40rpx !important;
			}

			.u-cell__value.data-v-1c4434ae {
				font-size: 26rpx;
				color: #000;
			}

			// 展开箭头
			.u-icon__icon--info.data-v-2ee87dc9 {
				color: #000000 !important;
				font-weight: bold !important;
				font-size: 30rpx !important;
			}

			.analyze-icon {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				left: 20rpx;
				top: 22rpx;
			}

			.analyze-title-bottom {
				width: 126rpx;
				height: 15rpx;
				position: absolute;
				left: 65rpx;
				top: 52rpx;
			}

			.order {
				width: 10rpx;
				height: 10rpx;
				background-color: #3a3d4b;
				border-radius: 50%;
				margin-top: 15rpx;
			}

			.text {
				width: 448rpx;
				margin-left: 10rpx;
				color: #3A3D4B;
			}

			.u-collapse-item__content__text.data-v-2675fb21 {
				padding: 0 28rpx 28rpx;
				color: #3A3D4B;
			}

			.showAllIN {
				height: auto;
			}

			.hidetext {

				-webkit-line-clamp: 4;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>